<div class="container">
	<h1>栅格</h1>
	<h2>demo</h2>
	<div class="row">
		<div class="col-6">6</div>
		<div class="col-6">6</div>
		<div class="col-6">6</div>
		<div class="col-6">6</div>
		<div class="col-6">6</div>
		<div class="col-6">6</div>
	</div>
	<div class="row">
		<div class="col-2">2</div>
		<div class="col-2">2</div>
	</div>
	<div class="row">
		<div class="col-1">1</div>
	</div>
	<h2>code</h2>
	<link rel='stylesheet' type='text/css' href='http://tools.oschina.net/js/syntaxhighlighter_3.0.83/styles/shCoreDefault.css'/><div id="highlighter_572810" class="syntaxhighlighter nogutter  xml"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"row"</code><code class="xml plain">&gt;</code></div><div class="line number2 index1 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"col-6"</code><code class="xml plain">&gt;6&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"col-6"</code><code class="xml plain">&gt;6&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"col-6"</code><code class="xml plain">&gt;6&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number5 index4 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"col-6"</code><code class="xml plain">&gt;6&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number6 index5 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"col-6"</code><code class="xml plain">&gt;6&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number7 index6 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"col-6"</code><code class="xml plain">&gt;6&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number8 index7 alt1"><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number9 index8 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"row"</code><code class="xml plain">&gt;</code></div><div class="line number10 index9 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"col-2"</code><code class="xml plain">&gt;2&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number11 index10 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"col-2"</code><code class="xml plain">&gt;2&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number12 index11 alt1"><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number13 index12 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"row"</code><code class="xml plain">&gt;</code></div><div class="line number14 index13 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"col-1"</code><code class="xml plain">&gt;1&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number15 index14 alt2"><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div></div></td></tr></tbody></table></div>
	<h2>百分比定义</h2>
	<link rel='stylesheet' type='text/css' href='http://tools.oschina.net/js/syntaxhighlighter_3.0.83/styles/shCoreDefault.css'/><div id="highlighter_444462" class="syntaxhighlighter nogutter  css"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="css plain">.col</code><code class="css value">-1</code>&nbsp;<code class="css plain">{</code></div><div class="line number2 index1 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">100%</code><code class="css plain">;</code></div><div class="line number3 index2 alt2"><code class="css plain">}</code></div><div class="line number4 index3 alt1"><code class="css plain">.col</code><code class="css value">-2</code>&nbsp;<code class="css plain">{</code></div><div class="line number5 index4 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">50%</code><code class="css plain">;</code></div><div class="line number6 index5 alt1"><code class="css plain">}</code></div><div class="line number7 index6 alt2"><code class="css plain">.col</code><code class="css value">-3</code>&nbsp;<code class="css plain">{</code></div><div class="line number8 index7 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">33.33333%</code><code class="css plain">;</code></div><div class="line number9 index8 alt2"><code class="css plain">}</code></div><div class="line number10 index9 alt1"><code class="css plain">.col</code><code class="css value">-4</code>&nbsp;<code class="css plain">{</code></div><div class="line number11 index10 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">25%</code><code class="css plain">;</code></div><div class="line number12 index11 alt1"><code class="css plain">}</code></div><div class="line number13 index12 alt2"><code class="css plain">.col</code><code class="css value">-5</code>&nbsp;<code class="css plain">{</code></div><div class="line number14 index13 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">20%</code><code class="css plain">;</code></div><div class="line number15 index14 alt2"><code class="css plain">}</code></div><div class="line number16 index15 alt1"><code class="css plain">.col</code><code class="css value">-6</code>&nbsp;<code class="css plain">{</code></div><div class="line number17 index16 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">16.66667%</code><code class="css plain">;</code></div><div class="line number18 index17 alt1"><code class="css plain">}</code></div><div class="line number19 index18 alt2"><code class="css plain">.col</code><code class="css value">-7</code>&nbsp;<code class="css plain">{</code></div><div class="line number20 index19 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">14.28571%</code><code class="css plain">;</code></div><div class="line number21 index20 alt2"><code class="css plain">}</code></div><div class="line number22 index21 alt1"><code class="css plain">.col</code><code class="css value">-8</code>&nbsp;<code class="css plain">{</code></div><div class="line number23 index22 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">12.5%</code><code class="css plain">;</code></div><div class="line number24 index23 alt1"><code class="css plain">}</code></div><div class="line number25 index24 alt2"><code class="css plain">.col</code><code class="css value">-9</code>&nbsp;<code class="css plain">{</code></div><div class="line number26 index25 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">11.11111%</code><code class="css plain">;</code></div><div class="line number27 index26 alt2"><code class="css plain">}</code></div><div class="line number28 index27 alt1"><code class="css plain">.col</code><code class="css value">-10</code>&nbsp;<code class="css plain">{</code></div><div class="line number29 index28 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">10%</code><code class="css plain">;</code></div><div class="line number30 index29 alt1"><code class="css plain">}</code></div><div class="line number31 index30 alt2"><code class="css plain">.col</code><code class="css value">-11</code>&nbsp;<code class="css plain">{</code></div><div class="line number32 index31 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">9.09091%</code><code class="css plain">;</code></div><div class="line number33 index32 alt2"><code class="css plain">}</code></div><div class="line number34 index33 alt1"><code class="css plain">.col</code><code class="css value">-12</code>&nbsp;<code class="css plain">{</code></div><div class="line number35 index34 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">8.33333%</code><code class="css plain">;</code></div><div class="line number36 index35 alt1"><code class="css plain">}</code></div><div class="line number37 index36 alt2"><code class="css plain">.col</code><code class="css value">-25</code>&nbsp;<code class="css plain">{</code></div><div class="line number38 index37 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">25%</code><code class="css plain">;</code></div><div class="line number39 index38 alt2"><code class="css plain">}</code></div><div class="line number40 index39 alt1"><code class="css plain">.col</code><code class="css value">-40</code>&nbsp;<code class="css plain">{</code></div><div class="line number41 index40 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">40%</code><code class="css plain">;</code></div><div class="line number42 index41 alt1"><code class="css plain">}</code></div><div class="line number43 index42 alt2"><code class="css plain">.col</code><code class="css value">-60</code>&nbsp;<code class="css plain">{</code></div><div class="line number44 index43 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">60%</code><code class="css plain">;</code></div><div class="line number45 index44 alt2"><code class="css plain">}</code></div><div class="line number46 index45 alt1"><code class="css plain">.col</code><code class="css value">-66</code>&nbsp;<code class="css plain">{</code></div><div class="line number47 index46 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">66.66666%</code><code class="css plain">;</code></div><div class="line number48 index47 alt1"><code class="css plain">}</code></div><div class="line number49 index48 alt2"><code class="css plain">.col</code><code class="css value">-75</code>&nbsp;<code class="css plain">{</code></div><div class="line number50 index49 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:&nbsp;</code><code class="css value">75%</code><code class="css plain">;</code></div><div class="line number51 index50 alt2"><code class="css plain">}</code></div></div></td></tr></tbody></table></div>
</div>